<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name=”renderer” content=”webkit|ie-comp|ie-stand” />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Expires" content="0">
    <title>食品溯源追溯服务管理平台</title>
    <link href="favicon.ico" type="image/x-icon" rel="icon">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link type="text/css" rel="stylesheet" href="/css/traceability/core.css">
    <link type="text/css" rel="stylesheet" href="/css/traceability/home.css">
    <link type="text/css" rel="stylesheet" href="/css/traceability/process.css">
    <style>
        .pc-header {
            border-bottom: solid #ccc 1px;
        }
        /* 左侧样式 */
        .ztb_nav {
            background: #fff;
            position: absolute;
            left: 32px;
            right: 0px;
            top: 51px;
            bottom: 0px;
            width: 235px;
            overflow: hidden;
            box-shadow: 1px 10px 11px #ccc;
        }
        .ztb_content {
            bottom: 35px;
        }
        .pc-about {
            background: url("/img/pd/banner1.jpg") center no-repeat;
        }
        .container {
            width: 96%;
            max-width: 1200px;
            margin: 20px auto;
            overflow: hidden;
        }
        .left-nav {
            float: left;
            width: 25%;
            margin-right: 10px;
            border-right: solid #ccc 1px;
            position: relative;
            height: 700px;
        }
        .left-nav-title {
            font-size: 24px;
            color: #fff;
            background: #36a053;
            padding: 5px;
            margin: 5px;
            padding: 10px 0px;
            box-shadow: 0px 5px 10px #ccc;
        }
        .left-nav-list .item {
            display: block;
            -webkit-transition: none;
            transition: none;
            padding-top: 12px;
            padding-right: 15px;
            padding-bottom: 12px;
            padding-left: 15px;
            background-color: #ffffff;
        }
        .right-content {
            float: left;
            width: 72%;
            margin-left: 25px;
        }
        .pc-about {
            width: 100%;
            height: 200px;
        }
        #top-btn,#down-btn {
            display: block;
            margin: 0px auto;
            background: #333;
            opacity: 0.7;
            color: #fff;
            height: 29px;
            padding-top: 5px;
        }
        #down-btn {
            position: absolute;
            bottom: 0px;
            width: 100%;
        }
        .online {
            top: 10px;
        }
        .ztb_content_01 li a {
            font-size: 14px;
            font-family: "微软雅黑";
        }
        /* 右侧内容样式 */
        .layui-elem-quote {
            border-left: 5px solid #36a053;
            /*border-left:0 none;
            border-bottom: 2px solid #36a053;*/
            font-size: 16px;
            font-family: "微软雅黑";
        }
        .layui-form .layui-form-item .layui-form-label,.layui-form .layui-form-item .layui-input-inline,.layui-form .layui-form-item .layui-input-block {
            font-size: 14px;
            font-family: "微软雅黑";
        }
        .layui-input-inline,.layui-input-block {
            padding: 10px 0px;
            text-align: left;
        }
        .layui-form-item {
            margin-bottom: 0px;
        }
        .layui-input-block {
            min-height: 20px;
        }
        .layui-form-label {
            width: 85px;
        }
        /*右侧生产过程内容样式*/
        .layui-tab-title li {
            font-family: "微软雅黑";
        }
        .layui-tab-title .layui-this {
            color: #fff;
            background: #17bc78;
            font-family: "微软雅黑";
        }
        .layui-tab-title {
            border-bottom-color: #17bc78;
            border-bottom-width: 3px;
        }
        .layui-tab-title .layui-this::after {
            border: solid 1px #17bc78;
        }
        iframe {
            width: 100%;
            min-height: 800px;
            margin-left: -10px;
        }
        .layui-tab-content {
            padding-right: 0px;
        }
    </style>
    <script type="text/javascript" src="/js/jquery-3.3.1.js"></script>
</head>
<body>
<header id="pc-header">
    <%--<div class="header">
        <div class="header-w clearfix">
            <form>
                <button>搜索</button>
                <input type="text" placeholder="请输入相关的关键词...">
            </form>
        </div>
    </div>--%>
    <div class="pc-header">
        <div class="pc-define">
            <a  href="index.html" target="_blank" class="pc-symbol"><%--<h1 style="font-size: 45px;display: inline-block;color: #36a053">LOGO</h1>--%><%--<img src="/img/icon/logo.png" title="食品溯源追溯服务管理平台">--%></a>
            <ul>
                <li><a  href="/traceability/index" class="current">首页</a></li>
                <li><a href="about.html">新闻资讯</a></li>
                <li><a href="bird.html">食品溯源</a></li>
                <%--<li><a href="register.html">境外注册</a></li>--%>
                <li><a href="certification.html">产品认证</a></li>
                <li><a href="about.html">关于我们</a></li>
                <%--<li><a href="distribute.html">诚信经销</a></li>--%>
            </ul>
            <div class="pc-chunks">
                <dl class="select">
                    <dt>用户登录</dt>
                    <dd style="display:none">
                        <div class="pc-eject">
                            <div class="pc-shells clearfix">
                                <h3>系统登录</h3>
                                <a href="index.html" target="_blank">忘记密码？</a>
                            </div>
                            <div class="pc-frame">
                                <form>
                                    <p><input type="text" placeholder="请输入您的用户名" name=""></p>
                                    <p><input type="text" placeholder="请输入您的密码" name=""></p>
                                    <p class="clearfix"><span><input type="text" placeholder="请输入验证码" name=""></span><span><img src="/img/icon/yzm.png" width="85" height="37" title="" align=""></span></p>
                                    <p><button>用户登录</button></p>
                                    <p><a href="index.html" target="_blank">企业注册</a></p>
                                </form>
                            </div>
                        </div>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</header>

<section id="pc-banner">
    <div class="pc-about"></div>
</section>

<section class="container">
    <div class="left-nav">
        <h1 class="left-nav-title">溯源信息</h1>
        <div id="img_bag" class="ztb_nav">
        <a href="javascript:void(0)" id="top-btn" style="display:none;" onmousedown="moveTop()" style="display:block; margin:0 auto"> <img src="/img/process/ztb_up.png" border="0" /></a>
        <div id="img" class="ztb_content">
            <div style="position:relative;">
                <div class="online"></div>
                <div class="ztb_main_01">
                    <ul class="ztb_content_01" id="trace-nav">
                        <li class="ztb_over">
                            <a href="javascript:;" class="ztb_con_text" onclick="clickli(this);">
                                产品信息
                            </a>
                            <ul class="ztb_content_02" id="produceInfo">
                                <li class="ztb_end ztb_active ztb_online"><a href="javascript:;">1.基本信息</a></li>
                                <li class="ztb_end"><a href="javascript:;">2.产品资质</a></li>
                            </ul>
                        </li>
                        <li class="ztb_on">
                            <a href="javascript:;" class="ztb_con_text" onclick="clickli(this);">生产商信息</a>
                            <ul class="ztb_content_02" id="zb" style="display:block">
                                <li class="ztb_end"><a href="javascript:;">1.基本信息</a></li>
                                <li class="ztb_end"><a href="javascript:;">2.企业资质</a></li>
                                <li class="ztb_end"><a href="javascript:;">3.企业简介</a></li>
                            </ul>
                        </li>
                        <li class="ztb_over">
                            <a href="javascript:;" class="ztb_con_text" onclick="clickli(this);">
                                生产过程信息
                                <%--<span class="ztb_time">2017-05-25</span>--%>
                            </a>
                            <%--<ul class="ztb_content_02">
                                <li class="ztb_end"><a href="javascript:;">1.投入品记录信息</a></li>
                                <li class="ztb_end"><a href="javascript:;">2.检查记录信息</a></li>
                                <li class="ztb_end"><a href="javascript:;">3.运输记录信息</a></li>
                            </ul>--%>
                        </li>
                        <%--<li> <a href="javascript:;" class="ztb_con_text" onclick="clickli(this);">生产信息</a>
                            <ul class="ztb_content_02">
                                <li><a href="javascript:;">1.投入品记录信息</a></li>
                                <li><a href="javascript:;">2.单选框列表测试</a></li>
                                <li><a href="javascript:;">3.下拉类表测试</a></li>
                                <li><a href="javascript:;">4.单选框列表测试</a></li>
                            </ul>
                        </li>
                        <li><a href="javascript:;" class="ztb_con_text" onclick="clickli(this);">加工信息</a>
                            <ul class="ztb_content_02">
                                <li><a href="javascript:;">1.加工记录表</a></li>
                                <li> <a href="javascript:;">2.单选框列表测试</a></li>
                            </ul>
                        </li>
                        <li> <a href="javascript:;"></a><a href="javascript:;" class="ztb_con_text" onclick="clickli(this);">运输信息</a>
                            <ul class="ztb_content_02">
                                <li><a href="javascript:;">1.运输记录表</a></li>
                                <li> <a href="javascript:;">2.单选框列表测试</a></li>
                            </ul>
                        </li>--%>
                    </ul>
                </div>
            </div>
        </div>
        <a href="javascript:void(0)" id="down-btn" style="display:none;" onmousedown="moveBottom()"> <img src="/img/process/ztb_down.png" border="0" /></a>
    </div>
    </div>
    <div class="right-content">
        <blockquote style="margin-top: 5px;" class="layui-elem-quote">
            基本信息
        </blockquote>

        <div style="width: 100%;height: 200px;text-align: center;" id="loading">
            <i style="font-size: 30px !important;line-height: 200px;" class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
        </div>
        <%--<form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">产品名称：</label>
                <div class="layui-input-inline" id="name">
                    产品名称
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">产品类型：</label>
                <div class="layui-input-block">
                    产品类型
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">产品图片：</label>
                <div class="layui-input-block">
                    <img style="padding: 5px;border: solid aliceblue;" src="http://192.168.25.133/group1/M00/00/00/wKgZhVxBjcWACM6aAAIY3g40MWs156.jpg" class="layui-upload-img" width="30%">
                </div>
            </div>
            <div class="layui-form-item layui-row layui-col-xs12">
                <label class="layui-form-label">单价：</label>
                <div class="layui-input-inline">
                    5.35元/斤
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">来源企业：</label>
                <div class="layui-input-block">
                    来源企业
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">产品简介：</label>
                <div class="layui-input-block">
                    马铃薯（学名：Solanum tuberosum L.），属茄科一年生草本植物，块茎可供食用，是全球第四大重要的粮食作物，仅次于小麦、稻谷和玉米。马铃薯又称地蛋、土豆 、洋山芋等，茄科植物的块茎。与小麦、稻谷、玉米、高粱并成为世界五大作物。
                    马铃薯原产于南美洲安第斯山区，人工栽培历史最早可追溯到大约公元前8000年到5000年的秘鲁南部地区。
                    马铃薯主要生产国有中国、俄罗斯、印度、乌克兰、美国等。中国是世界马铃薯总产最多的国家。
                    2015年，中国将启动马铃薯主粮化战略，推进把马铃薯加工成馒头、面条、米粉等主食，马铃薯将成稻米、小麦 、玉米外的又一主粮
                </div>
            </div>
        </form>--%>
    </div>
</section>



<footer id="pc-footer">
    <div class="pc-layer">
        <div class="pc-attach"> <p class="copyright"><%--Copyright© 2018&nbsp;&nbsp;All Rights Reserved&nbsp;&nbsp;--%><a href="index.html" target="_blank" style="color:#fff;">仲恺农业工程学院109实验室</a></p> </div>
    </div>
</footer>
<script src="/layui/layui.js"></script>
<script src="/js/traceability/trace-result.js"></script>
<script>

    //鼠标onhouse显示上传滚动箭头
    $("#img_bag").hover(function () {
        $("#top-btn").slideDown();
        $("#down-btn").slideDown();
    },function () {
        $("#top-btn").hide();
        $("#down-btn").hide();
    });

    function clickli(dom){
        var ul = $(dom).next('ul');
        if (ul.is(":hidden")) {
            ul.css('display','block')
        }else{
            ul.css('display','none')
        }

    }
    //滚动
    function js(obj){return document.getElementById(obj)}
    var maxHeight=js("img").getElementsByTagName("ul")[0].getElementsByTagName("li").length*105;
    //滚动图片的最大高度
    var targety = 211;
    //一次滚动距离
    var dx;
    var a=null;
    function moveTop(){
        var le=parseInt(js("img").scrollTop);
        if(le>211){
            targety=parseInt(js("img").scrollTop)-211;
        }else{
            targety=parseInt(js("img").scrollTop)-le-1;
        }
        scTop();
    }
    function scTop(){
        dx=parseInt(js("img").scrollTop)-targety;
        js("img").scrollTop-=dx * 0.3;
        clearScroll=setTimeout(scTop,50);
        if(dx*0.3 < 1){
            clearTimeout(clearScroll);
        }
    }
    function moveBottom(){
        var le=parseInt(js("img").scrollTop)+211;
        var maxL=maxHeight-600;
        if(le < maxL){
            targety=parseInt(js("img").scrollTop)+211;
        }else{
            targety=maxL
        }
        scBottom();
    }
    function scBottom(){
        dx=targety-parseInt(js("img").scrollTop);
        js("img").scrollTop+=dx*.3;
        a=setTimeout(scBottom,50);
        if(dx*0.3 < 1){
            clearTimeout(a)
        }
    }
</script>

</body>
</html>